<template>
  <div class="icons">
    <div class="big">
      <div class="big-icon">
        <i class="iconfont" style="background-color: #fd9d21;">&#xe61c;</i>
        <span>美食</span>
      </div>
      <div class="big-icon">
        <i class="iconfont" style="background-color: #ff6767;">&#xe604;</i>
        <span>电影/演出</span>
      </div>
      <div class="big-icon">
        <i class="iconfont" style="background-color: #8a90fa;">&#xe888;</i>
        <span>酒店住宿</span>
      </div>
      <div class="big-icon">
        <i class="iconfont" style="background-color: #fed030;">&#xe621;</i>
        <span>休闲娱乐</span>
      </div>
      <div class="big-icon">
        <i class="iconfont" style="background-color: #fd9d21">&#xe607;</i>
        <span>外卖</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "HomeIcons",
}
</script>
<style lang="scss" scoped>
  .icons{
    padding: 0 20px;
    background-color: #fff;
    .big{
      display: flex;
      justify-content: space-between;
      .big-icon{
        margin: 20px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        .iconfont{
          margin-bottom: 10px;
          display: block;
          width: 80px;
          height: 80px;
          border-radius: 20px;
          font-size: 50px;
          text-align: center;
          line-height: 80px;
          color: #fff;
        }
      }
    }
  }
</style>
